﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ccc {
            background: #ccc;
        }
    </style>

</head>

<body>
    <div class="box"></div>


    <script src="../d3.v3.min.js"></script>
    <script>
        /* ---------------- var -------------- */
        var data = [21, 42, 51, 23, 55, 66, 12],
            width = 800,
            height = 600,
            paddingTop = 100,
            paddingLeft = 50,
            xText = ['第一','第二', '第三', '第四', '第五', '第六', '第七'],
            rWidth = 40;

        //坐标轴比例尺
        //x轴    散点比例尺
        var xScale = d3.scale.ordinal()
            .domain(xText)
            .rangeRoundBands([0, 600]);
        //y轴     线性比例尺
        var yScale = d3.scale.linear()
            .domain([100, 0])
            .range([0, 300]);

        //x轴线生成器
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient('bottom');
        //y轴轴线生成器
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient('left');



        /* ---------------- do --------------- */
        //生成svg
        var svg = d3.select('.box')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .attr('fill', '#f66')
            .classed('ccc', true);
        //在svg中添加轴线
        //x轴
        svg.append('g')
            .attr('fill', 'none')
            .attr('stroke', 'seagreen')
            .attr('transform', 'translate(' + paddingLeft + ', ' + (300 + paddingTop) + ')')
            .call(xAxis);

        //y轴
        svg.append('g')
            .attr('fill', 'none')
            .attr('stroke', 'seagreen')
            .attr('transform', 'translate(' + paddingLeft + ', ' + paddingTop + ')')
            .call(yAxis);


        //y轴比例尺进行正比
        yScale.domain([0, 100]);
        //使用data-join进行添加内容
        svg.selectAll('.rect')
            .data(data)
            .enter()
            .append('rect')
            .classed('rect', true)
            //坐标要绘制到坐标系中，就要对坐标进行计算后进行绘制
            .attr('x', function (d, i) {
                return paddingLeft + xScale(xText[i]) + rWidth * .5;
            })
            .attr('y', function (d, i) {
                return paddingTop + 300 - yScale(d);
            })
            .attr('width', rWidth)
            .attr('height', function (d, i) {
                return yScale(d);
            });
        //设置每个数据的文字
        svg.selectAll('.text')
            .data(data)
            .enter()
            .append('text')
            .classed('text', true)
            .attr('x', function(d, i){
                return paddingLeft + rWidth * .5 + 10 + xScale(xText[i]);
            })
            .attr('y', function(d, i){
                return paddingTop + 300 - yScale(d) + 15;
            })
            .attr('fill', 'white')
            .text(function(d, i){
                return d;
            });




    </script>
</body>

</html>